<template>
  <div class="phone-code" v-if="tokenFlag"></div>
</template>
<script setup>
import { reactive, toRefs, ref } from "vue";
import { phoneLogin } from "@/api/components/api";
import { imgCodeSend } from "@/api/enteralNutrition/enteralNutrition.js";
import { showToast } from "vant";
import { siteTitle } from "@/settings";
import { setStorage, getStorage, authorizeLogin } from "@/utils/common";
import { useRoute, useRouter } from "vue-router";
const time = ref("");
const props = defineProps(["tokenFlag", "jumpPath", "tabbarPath"]);
const emit = defineEmits(["confirm"]);
const router = useRouter();
const route = useRoute();
const state = reactive({
  tokenFlag: props.tokenFlag,
  codeBtnShow: true,
  codeText: false,
  from: {
    realName: "",
    phone: "",
    phoneCode: "",
  },
  btnDisabled: true,
  token: getStorage(`${siteTitle}_token`),
  code: route.query.code || route.query.auth_code,
});
const { from, codeBtnShow, codeText, tokenFlag, btnDisabled } = toRefs(state);

// 判断是微信还是支付宝
const ua = window.navigator.userAgent;
if (ua.indexOf("MicroMessenger") > 0) {
  authorizeLogin(1, state.code);
}
if (ua.indexOf("AlipayClient") > 0) {
  authorizeLogin(2, state.code);
}

// 判断有没有token
if (!state.token) {
  state.tokenFlag = true;
}
// 输入手机号和验证码
const phoneCheck = () => {
  if (state.from.phone.length == 11) {
    if (!state.codeText) {
      state.codeBtnShow = false;
    }
  }

  if (state.from.phone && state.from.phoneCode) {
    state.btnDisabled = false;
  } else {
    state.btnDisabled = true;
  }
};

// 倒计时
const finish = (time) => {
  state.codeBtnShow = false;
  state.codeText = false;
};
const sendCode = () => {
  imgCodeSend(state.from).then((v) => {
    state.codeBtnShow = true;
    state.codeText = true;
    time.value.start();
    showToast("验证码发送成功");
  });
};
// 输入框确认
const confirm = () => {
  if (state.from.phone && state.from.phoneCode) {
    phoneLogin(state.from).then((v) => {
      const data = v.data;
      state.tokenFlag = false;
      emit("confirm", props.tabbarPath);
      setStorage(`${siteTitle}_token`, data.token);
      setStorage(`${siteTitle}_orgName`, data.miniSaleUser.orgName);
      if (props.jumpPath == 1) {
        router.push({
          name: "enteralNutrition",
          query: { jumpPath: props.jumpPath },
        });
      } else if (props.jumpPath == 2) {
        // router.push({ name: "historicalOrders" });
      } else if (props.jumpPath == 3) {
        router.push({
          name: "orderingDishes",
          query: { jumpPath: props.jumpPath },
        });
      } else {
        console.log(props.jumpPath);
        router.push(`${props.jumpPath}`);
      }
    });
  }
};
const cancel = () => {
  state.tokenFlag = false;
  emit("confirm");
};
</script>
<style lang="scss" scoped>
.phone-code {
  * {
    box-sizing: border-box;
  }
  .van-popup {
    border-radius: 8px;
    padding: 16px 16px 30px 16px;
  }
  .van-field {
    padding: 4px 10px;
    border: 1px solid #cacaca;
    border-radius: 6px;
  }
}
</style>
